import './index.scss'
import { DotLoading } from 'antd-mobile'
import { useNews } from './useNew'
import GeneralCard from '@/components/GeneralCard'
import Bread from '@/components/Bread'

type Item  = 
{
    id?: number;
    title?: string;
    link:string;
    classname?: string
}
const News = () => {
    // 逻辑业务
    const { headers, imgs, isLoading } = useNews()
    const breadNav: Item[] = [
      { id: 1, title: headers?.title, link: '/news', classname: 'active' },
    ]
    // UI 渲染
    return (
      <div>
        {isLoading ? <div className='content-box'><span>Loading</span><DotLoading /></div> :
          <div className='content-box'>
            <Bread items={breadNav}/>
            {imgs.map((item) => (
                <GeneralCard 
                  src={item.default_image} 
                  alt={item.title} 
                  title={item.title} 
                  desc={item.description}
                  link={`/news/detail/${item.id}`}
                  key={item.id}
                  classname='Product-display'/>
              ))}
          </div>
        }

      </div>
    )
  }
  
  export default News
  